import type { FC } from 'react'
import dayjs from 'dayjs'
import { useTranslation } from 'react-i18next'
import { languages, i18n } from '@/library/libs/i18n'

const Home: FC = () => {
  const { t } = useTranslation()
  const name = 'Home'

  return (
    <>
      <h2>{name}</h2>
      <div>
        <header>
          <select
            value={i18n.language}
            onChange={(evt) => {
              i18n.changeLanguage(evt.target.value)
            }}
          >
            {languages.map((locales) => (
              <option
                key={locales.value}
                value={locales.value}
                label={locales.name}
                style={{ fontWeight: i18n.resolvedLanguage === locales.value ? 800 : 400 }}
              />
            ))}
          </select>
        </header>
      </div>
      <h2>{t('common.document.title')}</h2>
      <h2>{t('common.other.currentTime', { time: dayjs(new Date(2018, 8, 18)) })}</h2>
    </>
  )
}

export default Home
